<template>
    <el-dialog class="car-owner-add" :title="isEdit?'信息修改':'新增车辆'" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="所在小区" prop="orgId">
                        <org-select v-model="ruleForm.orgId"  @select="orgSelect" :show-all="false"></org-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车主姓名" prop="ownerId">
                        <car-owner ref="car-owner" v-model="ruleForm.ownerId"></car-owner>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="车辆名" prop="carName">
                        <el-input v-model="ruleForm.carName"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车牌号" prop="plateNumber">
                        <el-input v-model="ruleForm.plateNumber"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                 <el-col :span="12">
                    <el-form-item label="车辆品牌" prop="brand">
                        <el-input v-model="ruleForm.brand"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="生产厂家" prop="manufacturers">
                        <el-input v-model="ruleForm.manufacturers"></el-input>
                    </el-form-item>
                </el-col>
             </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="RFID标签卡号" prop="rfidCardNo">
                        <el-input v-model="ruleForm.rfidCardNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="功率" prop="power">
                        <el-input-number v-model="ruleForm.power" :precision="2" :step="0.1"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row> 
               
                <el-col :span="12">
                    <el-form-item label="车架号" prop="carVin">
                        <el-input v-model="ruleForm.carVin"></el-input>
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="最大速度" prop="topSpeed">
                        <el-input-number v-model="ruleForm.topSpeed" :min="1" label="描述文字"></el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="车辆照片" prop="photo">
                        <el-upload class="upload-demo" action="/xds/file/photo-upload" :data="fileData" :on-success="uploadSuccess" :limit="1" :file-list="fileList">
                            <el-button type="text" size="small">上传文件</el-button>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button @click="doReset">重 置</el-button>
            <el-button type="primary" @click="doConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>


<script>
import * as API from '@/api/business/car'
import * as PhotoApi from '@/api/business/photo'
export default {
    data() {
        return {
            dialogVisible: false,
            isEdit: false,
            fileList: [],
            filePath: null,
            fileData: {
                filePrefix: 'car'
            },
            ruleForm: {
                ownerName: '',
                carName: '',
                brand: '',
                photoId: '',
                orgId: '',
                orgName: '',
                ownerId: '',
                delFlag:0,
                rfidCardNo:'',
                manufacturers:'',
                carVin:'',
                topSpeed:'',
                power:'',
                plateNumber:''
            },
            rules: {
                ownerId: [{ required: true, message: '请选择车主姓名', trigger: 'blur' }],
                carName: [{ required: true, message: '请输入车辆名', trigger: 'blur' }],
                plateNumber:[{ required: true, message: '请输入车牌号', trigger: 'blur' }],
                orgId: [{ required: true, message: '请选择所在小区', trigger: 'blur' }],
                photoId: [{ required: true, message: '请上传照片', trigger: 'blur' }],
                manufacturers: [{ required: false, message: '请输入生产厂家', trigger: 'blur' }],
                carVin: [{ required: false, message: '请输入车架号', trigger: 'blur' }],
                topSpeed: [{ required: false, message: '请输入最大速度', trigger: 'blur' }],
                power: [{ required: false, message: '请输入功率', trigger: 'blur' }],
                rfidCardNo: [{ required: true, message: '请输入RFID标签卡号', trigger: 'blur' }],
                brand: [{ required: false, message: '请输入车辆品牌', trigger: 'blur' }],
                
            }
        }
    },
    methods: {
        show() {
            this.dialogVisible = true
            this.isEdit = false
            this.$nextTick(()=>{
                this.doReset()
            });
        },
        edit(ruleForm) {
            this.isEdit = true
            this.dialogVisible = true
            this.$nextTick(()=>{
                this.$refs['car-owner'].query(ruleForm.orgId)
                Object.assign(this.ruleForm, ruleForm)
            });
        },
        orgSelect(obj) {
            this.ruleForm.orgName = obj.name
            this.$refs['car-owner'].query(obj.id)
        },
        handleClose() {
            this.dialogVisible = false
            this.doReset()
        },
        doConfirm() {
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    if (this.isEdit) {
                        API.edit(this.ruleForm).then(res => {
                            if (res.data.code === 0) {
                                this.$message.success('车辆信息修改成功!')
                                this.handleClose()
                                this.$emit('table-search')
                            }
                        })
                    } else {
                        PhotoApi.save({ path: this.filePath }).then(res => {
                            if (res.data.code === 0) {
                                this.ruleForm.photoId = res.data.data
                                API.save(this.ruleForm).then(res => {
                                    if (res.data.code === 0) {
                                        this.$message.success('新增车辆信息成功!')
                                        this.handleClose()
                                        this.$emit('table-search')
                                    }
                                })
                            }
                        })
                    }
                }
            })
        },
        doReset() {
            this.$refs['ruleForm'].resetFields()
        },
        uploadSuccess(response) {
            this.filePath = response.data
            if (response.data.indexOf('/static') > -1) {
                this.filePath = response.data.substr(response.data.indexOf('/static'))
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.car-owner-add {
    .el-input {
        width: 220px;
    }
}
</style>
